@mixin input-base {
    outline: none;
    transition: 0.4s;
}

@mixin input-color($color-on:#000, $color-off:#fff) {
    background: $color-off;
    color: mix($color-on, $color-off, 60%);
    border-color: mix($color-on, $color-off, 10%);

    &:focus {
        border-color: mix($color-on, $color-off, 10%);
        box-shadow: 0 0 10px mix($color-on, $color-off, 15%);
        color: $color-on;
    }

    &:hover {
        background: mix($color-on, $color-off, 3%);
        border-color: mix($color-on, $color-off, 25%);
    }

    &:active {
        background: mix($color-on, $color-off, 0%);
    }
}

@mixin input-size($rate:1) {
    font-size: ($rate + 2) / 3 * 16px;
    line-height: ($rate + 2) / 3 * 16px + 2px;
    padding: $rate * 0.4em $rate * 0.6em;
    border-radius: $rate * 4px;
}

@mixin input-border($b-width:1px, $b-style:solid) {
    border: {
        width: $b-width;
        style: $b-style;
    }
}